<!--
* @description 选择合同列表
  @params dialogFormVisible 显示
  @params saveContractId 存储方法
  @params apiName_params 列表接口名
!-->

<!-- 单页面需要多个上传组件 -->
<template>
	<div>
		<el-dialog title="选择合同（直接点击单条记录）" width='70%' :before-close="tableSelect" :visible.sync="dialogFormVisible">
			<div>
				<div class="flex-row rightSearchBlock-search" style="padding: 0">
					<div class="search-item flex-row flex-alignCenter">
						<div style="margin-right: 10px; white-space: nowrap">合同号</div>
						<el-input v-model="searchList.contractCode" placeholder="" size="small" @input="getData()" />
					</div>
				</div>
				<!-- 表格 -->
				<div style="margin-top: 10px">
					<el-table :data="tableData.records" style="width: 100%" class="tableScroll" highlight-current-row @current-change="tableSelect">
						<el-table-column prop="contractCode" label="合同号" :width="flexColumnWidth('contractCode',tableData.records)"></el-table-column>
						<el-table-column prop="contractSignedDate" label="合同签订日期" width="120"></el-table-column>
						<el-table-column prop="companyName" label="卖方公司名称"  :width="flexColumnWidth('companyName',tableData.records)"></el-table-column>
						<el-table-column prop="amount" label="金额" :width="flexColumnWidth('amount',tableData.records)"></el-table-column>
						<el-table-column prop="currency" label="币种"></el-table-column>
						<el-table-column prop="originalCountry" label="原产地国" :width="flexColumnWidth('originalCountry',tableData.records)"></el-table-column>
						<el-table-column prop="paymentType" label="付款方式"></el-table-column>
					</el-table>
				</div>
				<!-- 分页 -->
				<div v-if="tableData.total" class="block" style="margin-top: 10px; text-align: right">
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchList.pageNum" :page-size="searchList.pageSize" layout="sizes,total, prev, pager, next, jumper" :page-sizes="[7, 20, 30, 40]" :total="Number(tableData.total)"></el-pagination>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<!-- <el-button type="primary" @click="confirm_contract(contractDetail)"
          >确 定</el-button
        >
        <el-button @click="dialogFormVisible = false">取 消</el-button> -->
			</div>
		</el-dialog>
	</div>
</template>
<script>
export default {
	name: 'page',
	props: {
		dialogFormVisible: {
			type: Boolean,
			default: false,
		},
		tradeType: {
			type: String,
			default: '',
		},
		apiName_params: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			tableData: { records: [{}] },
			searchList: {
				pageNum: 1,
				pageSize: 7,
				type: '国际',
			},
		};
	},
	created() {
		this.getData();
	},
	methods: {
		//增加搜索条件
		addSearchCriteria(key, value) {
			this.searchList[key] = value;
			console.log(this.searchList);
		},
		tableSelect(val) {
			if (val[0] && val[0].id) {
				val = this.cloneObjectFn(val);
			}
			this.$emit('saveContractId', val);
		},
		//分页选择每页多少条
		handleSizeChange(val) {
			this.searchList.pageSize = val;
			this.getData();
		},
		//分页当前页
		handleCurrentChange(val) {
			this.searchList.pageNum = val;
			this.getData();
		},
		getData(pageNum) {
			var apiName = 'page_contract';
			if (this.apiName_params) {
				apiName = this.apiName_params;
			}
			this.searchList.tradeType = this.tradeType;
			this.$myApi[apiName](this.searchList).then((res) => {
				if (res.code == 200) {
					this.tableData = res.data;
				}
			});
		},
	},
};
</script>
